import styles from './index.module.scss';
import { NavBar, TextArea, Toast } from 'antd-mobile';
import { useState } from 'react';
import { useAppDispatch, useAppSelector } from '@/store';
import {
  getCommentsByIdAction,
  getReplyCommentsAction,
  sendCommentAction,
} from '@/store/action/comment';
import { getDetailByIdAction } from '@/store/action/article';
type Props = {
  onClose?: () => void;
};
export default function CommentInput({ onClose }: Props) {
  const [msg, setMsg] = useState('');
  const dispatch = useAppDispatch();
  const { detail } = useAppSelector((state) => state.article);
  const { originComment } = useAppSelector((state) => state.comment);

  const name = originComment.aut_name;
  const { art_id } = detail;

  const handleSendComment = async () => {
    await dispatch(sendCommentAction({ content: msg, target: art_id }));
    dispatch(getDetailByIdAction(art_id));
    if (name) {
      dispatch(getReplyCommentsAction(originComment.com_id));
      dispatch(getCommentsByIdAction(art_id, 'a'));
    }
    Toast.show({ content: '评论成功' });
    onClose && onClose();
  };
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        right={
          <span className="publish" onClick={() => handleSendComment()}>
            发表
          </span>
        }
      >
        {name ? '回复评论' : '评论文章'}
      </NavBar>
      <div className="input-area">
        {name && <div className="at">@{name}:</div>}

        <TextArea
          value={msg}
          onChange={setMsg}
          autoFocus
          placeholder="说点什么~"
          rows={10}
        />
      </div>
    </div>
  );
}
